<!DOCTYPE html>
<html>
<head>
	<title>理财计算器</title>
	<meta name="keywords" content="迅泊达">
	<meta name="description" content='迅泊达'/>
	<link rel="shortcut icon" href="/static/favicon.ico"/>
	<link rel="stylesheet" href="/static/front/fonts/iconfont.css">
	<link rel="stylesheet" href="/static/front/css/base_new.css">
	<link rel="stylesheet" href="/static/front/css/library.css">
	<link rel="stylesheet" href="/static/front/css/syjsq.css">
	<script type="text/javascript" src="/static/script/jquery.js"></script>
	<script src="/static/front/js/jquery.countdown.js"></script>
    <script src="/static/front/js/js.js"></script>
</head>
 <body>
 	<div id="header">
		<#include "./base/top.ftl" />
	</div>
	<div class="Calculator">
		<div class="Calculator_wrap">
			<h3>收益计算器</h3>
			<form action=''>
				<label for="" class='select_type' id="payment_mode">
					<span>计息方式</span>
					<span class="click_ev click_set"><input type="radio" name='mode' checked="checked" value="3">等额本息</span>
					<span class="click_ev"><input class="actd" type="radio" name='mode' value="1">一次性还款</span>
					<span class="click_ev click_set"><input type="radio" name='mode' value="4">先息后本</span>
				</label>
				<label for="" class='select_type'>
					<span>计算类型</span>
					<span class="click_ev"><input type="radio" name='type' checked="checked" value="1">标准版</span>
					<span class="click_ev"><input type="radio" name='type' value="2">高级版</span>
				</label>
				<label for="" class='select_type hide'>
					<span>投资期限</span>
					<span class="click_ev"><input class="qi_bl" type="radio" name="time" checked="checked" value="month">月</span>
					<span class="click_ev"><input class="day_bl" type="radio" name="time" value="day">天</span>
				</label>
				<label for="" class="tzje input_share">
					<span class="fl">拟投资金额</span>
					<input id="money" type="number" class="fl">
					<i class="fl">元</i>
				</label>
				<label for="" class="tz_nh input_share">
					<span class="fl">年化收益</span>
					<input id="yearRate" type="number" class="fl">
					<i class="fl">%</i>
				</label>
				<label for="" class="tz_nh input_share">
					<span class="fl">投资期数</span>
					<input id="period" type="number" class="fl">
					<i class='fl reset_txt'>期</i>
				</label>
				<label for="" class="jsq_btn">
					<input class="reset" type="reset" value="清空" />
					<input id="count" type="button" value="计算"/>
				</label>
			</form>
			<p>预计收益<span id="income">0</span></p>
			<table class="show_data">
				<thead>
					<tr>
						<td class='set_w1 thead_setw1'>期次</td>
						<td class='set_w2 thead_setw1'>应收本息（元）</td>
						<td class='set_w2 thead_setw1'>应收本金（元）</td>
						<td class='set_w2 thead_setw1'>应收利息（元）</td>
						<td class='set_w2 thead_setw1'>剩余本金（元）</td>
						<td class='set_w2 thead_setw1'>剩余利息（元）</td>
					</tr>
				</thead>
				<tbody class="census">
					
				</tbody>
			</table>
		</div>
	</div>
	<!--底部开始-->
	<div id="footer">
        <div class="content">
			<#include "./base/foot.ftl" />
        </div>
    </div>
	<!--底部结束-->
	<script type="text/javascript">
		window.onload=function(){
			$('.select_type').find('.click_ev').click(function(ev){
			var ipu = $(this).find('input')[0];
			if(ipu.checked==false){
				ipu.checked=true;
			};

			var txt = $(this).text();
			switch(txt){
				case "高级版":
					$('.Calculator_wrap').find(".hide").css({"height":"25px","opacity":1,"filter":"alpha(opacity=100)"});
					$('.reset_txt').html("月");
					break;
				case "标准版":
					$('.Calculator_wrap').find(".hide").css({"height":"0","opacity":0,"filter":"alpha(opacity=0)"});
					$('.reset_txt').html("期");
					if($('.day_bl')[0].checked=true){
						$('.day_bl')[0].checked=false;
						$('.qi_bl')[0].checked=true;
					};
					break;
				case "天":
					$('.reset_txt').html(txt);
					$(".click_set").hide();
					$(".actd")[0].checked=true;
					break;
				case "月":
					$('.reset_txt').html(txt);
					$(".click_set").show();
					$(".click_set").find("input")[0].checked=true;
					break;
				};
			});

			$('.reset').click(function(){
				$('.hide').css({"height":"0","opacity":0,"filter":"alpha(opacity=0)"});
				$('.reset_txt').html("期");
				$(".click_set").show();
				$(".click_set").find("input")[0].checked=true;
			});
		};
		
		$("#count").click(function(){
			var interestMethod = $("input[name='mode']:checked").val(); //还款方式
			var type = $("input[name='type']:checked").val(); // 计算器类型
			var money= $("#money").val() ; 
			var yearRate= $("#yearRate").val() ; 
			var period= $("#period").val() ;
		    var income=0;
			if(type==2){
				var periodUnit =  $("input[name='time']:checked").val();
				$.ajax({
					type: 'POST',
		            url:  '/calculator',
		            data: {interestMethod:interestMethod,money:money,
							yearRate:yearRate,period:period,periodUnit:periodUnit},
		            async: false,
		            success: function(result) {
		            	if(result.code == -1){
		            		var data = result.entity;
		            		var list = result.entity.list;
		            		var type = data.periodUnit;
		            		$(".census").html("");
		            		var html = "";
		            		for (var i=0;i<list.length;i++) {
								html += '<tr><td class="set_w1">'+list[i].index+'</td>';
								html += '<td class="set_w2">￥'+list[i].totleAmount+'</td>';
								html += '<td class="set_w2">￥'+list[i].totleMoney+'</td>';
								html += '<td class="set_w2">￥'+list[i].interest+'</td>';
								html += '<td class="set_w2">￥'+list[i].residualAmount+'</td>';
								html += '<td class="set_w2">￥'+list[i].residualInterest+'</td>';
								html += '</tr>';
								income+=parseFloat(list[i].interest);
							}
							$(".census").html(html);
						    $("#income").html("￥"+income.toFixed(2));
            			}
		            }
	            });
			}else{ 
				var periodUnit = "month" ; 
				$.ajax({
					type: 'POST',
		            url:  '/calculator',
		            data: {interestMethod:interestMethod,money:money,
							yearRate:yearRate,period:period,periodUnit:periodUnit},
		            async: false,
		            success: function(result) {
		            	if(result.code == -1){
		            		var data = result.entity;
		            		var list = result.entity.list;
		            		var type = data.periodUnit;
		            		$(".census").html("");
		            		var html = "";
		            		for (var i=0;i<list.length;i++) {
								html += '<tr><td class="set_w1">'+list[i].index+'</td>';
								html += '<td class="set_w2">￥'+list[i].totleAmount+'</td>';
								html += '<td class="set_w2">￥'+list[i].totleMoney+'</td>';
								html += '<td class="set_w2">￥'+list[i].interest+'</td>';
								html += '<td class="set_w2">￥'+list[i].residualAmount+'</td>';
								html += '<td class="set_w2">￥'+list[i].residualInterest+'</td>';
								html += '</tr>';
								income+=parseFloat(list[i].interest)
							}
							$(".census").html(html);
							$("#income").html("￥"+income.toFixed(2));
            			}
		            }
	            });
            }
		});
	</script>
 </body>
</html>